<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建族谱 | 家族族谱</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5', // 主色调：靛蓝色
                        secondary: '#10B981', // 辅助色：翡翠绿
                        neutral: '#1F2937', // 中性色：深灰
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-all-300 {
                transition: all 300ms ease;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-neutral-800 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-sitemap text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-neutral-800">家族族谱</h1>
            </div>
            
            <!-- 桌面端导航 -->
            <nav class="hidden md:flex items-center space-x-8">
                <a href="index.html" class="text-neutral-600 hover:text-primary transition-colors duration-300">首页</a>
                <a href="#" class="text-primary font-medium border-b-2 border-primary pb-1">创建族谱</a>
                <a href="#" class="text-neutral-600 hover:text-primary transition-colors duration-300">家族树</a>
                <a href="#" class="text-neutral-600 hover:text-primary transition-colors duration-300">成员管理</a>
                <a href="#" class="text-neutral-600 hover:text-primary transition-colors duration-300">媒体库</a>
            </nav>
            
            <!-- 移动端菜单按钮 -->
            <button id="mobile-menu-button" class="md:hidden text-neutral-700 focus:outline-none">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg absolute w-full">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                <a href="index.html" class="py-2 px-4 text-neutral-600 hover:bg-gray-100 rounded-lg transition-colors duration-300">首页</a>
                <a href="#" class="py-2 px-4 bg-primary/10 text-primary font-medium rounded-lg transition-colors duration-300">创建族谱</a>
                <a href="#" class="py-2 px-4 text-neutral-600 hover:bg-gray-100 rounded-lg transition-colors duration-300">家族树</a>
                <a href="#" class="py-2 px-4 text-neutral-600 hover:bg-gray-100 rounded-lg transition-colors duration-300">成员管理</a>
                <a href="#" class="py-2 px-4 text-neutral-600 hover:bg-gray-100 rounded-lg transition-colors duration-300">媒体库</a>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="flex-grow container mx-auto px-4 py-8 md:py-12">
        <section class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
            <div class="bg-primary py-6 px-8 text-white">
                <h2 class="text-2xl md:text-3xl font-bold mb-2">创建你的家族族谱</h2>
                <p class="opacity-90">开始记录你的家族历史，传承家族文化</p>
            </div>
            
            <div class="p-8">
                <form id="create-tree-form" class="space-y-6">
                    <div class="space-y-4">
                        <div>
                            <label for="tree-name" class="block text-sm font-medium text-neutral-700 mb-1">族谱名称 <span class="text-red-500">*</span></label>
                            <input type="text" id="tree-name" name="tree-name" required
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-300"
                                placeholder="例如：张氏家族族谱">
                        </div>
                        
                        <div>
                            <label for="family-name" class="block text-sm font-medium text-neutral-700 mb-1">家族姓氏 <span class="text-red-500">*</span></label>
                            <input type="text" id="family-name" name="family-name" required
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-300"
                                placeholder="例如：张">
                        </div>
                        
                        <div>
                            <label for="description" class="block text-sm font-medium text-neutral-700 mb-1">族谱描述</label>
                            <textarea id="description" name="description" rows="3"
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-300"
                                placeholder="简要描述你的家族历史和族谱特点"></textarea>
                        </div>
                    </div>
                    
                    <div class="pt-4 border-t border-gray-200">
                        <h3 class="text-lg font-semibold text-neutral-800 mb-4">起始成员信息</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="founder-name" class="block text-sm font-medium text-neutral-700 mb-1">姓名 <span class="text-red-500">*</span></label>
                                <input type="text" id="founder-name" name="founder-name" required
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-300"
                                    placeholder="例如：张三">
                            </div>
                            
                            <div>
                                <label for="founder-gender" class="block text-sm font-medium text-neutral-700 mb-1">性别 <span class="text-red-500">*</span></label>
                                <select id="founder-gender" name="founder-gender" required
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-300">
                                    <option value="">请选择</option>
                                    <option value="male">男</option>
                                    <option value="female">女</option>
                                </select>
                            </div>
                            
                            <div>
                                <label for="founder-birth" class="block text-sm font-medium text-neutral-700 mb-1">出生日期</label>
                                <input type="date" id="founder-birth" name="founder-birth"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-300">
                            </div>
                            
                            <div>
                                <label for="founder-death" class="block text-sm font-medium text-neutral-700 mb-1">逝世日期</label>
                                <input type="date" id="founder-death" name="founder-death"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-300">
                            </div>
                        </div>
                        
                        <div class="mt-4">
                            <label for="founder-biography" class="block text-sm font-medium text-neutral-700 mb-1">人物简介</label>
                            <textarea id="founder-biography" name="founder-biography" rows="3"
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-300"
                                placeholder="简要介绍该成员的生平事迹"></textarea>
                        </div>
                    </div>
                    
                    <div class="pt-4 border-t border-gray-200 flex justify-end space-x-4">
                        <button type="button" onclick="window.location.href='index.html'"
                            class="px-6 py-2 border border-gray-300 text-neutral-700 font-medium rounded-lg hover:bg-gray-50 transition-all duration-300">
                            取消
                        </button>
                        <button type="submit"
                            class="px-6 py-2 bg-primary text-white font-medium rounded-lg shadow-md hover:shadow-lg hover:bg-primary/90 transform hover:-translate-y-1 transition-all duration-300">
                            创建族谱
                        </button>
                    </div>
                </form>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-neutral-800 text-white py-8 mt-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa fa-sitemap text-primary text-xl"></i>
                        <h3 class="text-lg font-bold">家族族谱</h3>
                    </div>
                    <p class="text-neutral-400 text-sm">记录家族历史，传承家族文化，连接家族成员。</p>
                </div>
                
                <div>
                    <h4 class="font-semibold mb-4">快速链接</h4>
                    <ul class="space-y-2 text-sm text-neutral-400">
                        <li><a href="index.html" class="hover:text-white transition-colors duration-300">首页</a></li>
                        <li><a href="#" class="hover:text-white transition-colors duration-300">创建族谱</a></li>
                        <li><a href="#" class="hover:text-white transition-colors duration-300">家族树</a></li>
                        <li><a href="#" class="hover:text-white transition-colors duration-300">成员管理</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-semibold mb-4">支持</h4>
                    <ul class="space-y-2 text-sm text-neutral-400">
                        <li><a href="#" class="hover:text-white transition-colors duration-300">帮助中心</a></li>
                        <li><a href="#" class="hover:text-white transition-colors duration-300">常见问题</a></li>
                        <li><a href="#" class="hover:text-white transition-colors duration-300">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-semibold mb-4">关注我们</h4>
                    <div class="flex space-x-4">
                        <a href="#" class="text-neutral-400 hover:text-primary transition-colors duration-300 text-lg"><i class="fa fa-weixin"></i></a>
                        <a href="#" class="text-neutral-400 hover:text-primary transition-colors duration-300 text-lg"><i class="fa fa-weibo"></i></a>
                        <a href="#" class="text-neutral-400 hover:text-primary transition-colors duration-300 text-lg"><i class="fa fa-qq"></i></a>
                    </div>
                </div>
            </div>
            
            <div class="pt-8 border-t border-neutral-700 text-center text-neutral-500 text-sm">
                <p>© 2023 家族族谱 版权所有 | 隐私政策 | 服务条款</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 移动端菜单切换
        document.getElementById('mobile-menu-button').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // 表单提交处理
        document.getElementById('create-tree-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 收集表单数据
            const formData = {
                treeName: document.getElementById('tree-name').value,
                familyName: document.getElementById('family-name').value,
                description: document.getElementById('description').value,
                founder: {
                    name: document.getElementById('founder-name').value,
                    gender: document.getElementById('founder-gender').value,
                    birth: document.getElementById('founder-birth').value,
                    death: document.getElementById('founder-death').value,
                    biography: document.getElementById('founder-biography').value
                }
            };
            
            // 这里可以添加表单验证逻辑
            
            // 模拟API提交
            console.log('创建族谱数据:', formData);
            
            // 显示成功消息
            alert('族谱创建成功！');
            
            // 跳转到家族树页面
            window.location.href = 'index.html';
        });
    </script>
</body>
</html>